import React,{Component} from 'react'
import * as pub from '../../config/public';
import * as fetch from '../../config/fetch';
import {Spin,message} from 'antd'
import Dropzone from 'react-dropzone'
class Card extends Component {
	constructor(props) {
		super(props);
		this.state = {
		userData:{},
		user1Data:{},
		HonorList:[],
		Honor2List:[],
		changeState:true,
		loading : false,
		cover_image:{},
		seifInformation:'',
		headPath:'',
		Honor2ListMy:[],
		agentChangeList:[],
		mdrt:'',
		star:''
		}
	}
	getOne(){
      pub.loading(this,true);
		fetch.getOne({}).then((data)=>{
			if(data.result==='RC100'){
              this.setState({
				userData:data.obj.data?data.obj.data:{},
				user1Data:data.user?data.user:{},
				headPath:data.user.headPath,
				seifInformation:data.user.seifInformation?data.user.seifInformation:'',
			   })
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		}, (res) => {
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	myHonor(){
		 pub.loading(this,true);
		fetch.myHonor({}).then((data)=>{
			if(data.result==='RC100'){
              this.setState({
				  Honor2List:data.allHonor?data.allHonor:[],
				  Honor2ListMy:data.myHonor?data.myHonor:[]
			   },()=>{
				   let myHonor=[]
				   for(let x of this.state.Honor2ListMy){
					   myHonor.push(x.honorId);
				   }
				   this.setState({
					   Honor2ListMy:myHonor
				   })
			   })
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		}, (res) => {
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	allCertificate(){
		 pub.loading(this,true);
		fetch.allCertificate({}).then((data)=>{
			if(data.result==='RC100'){
				this.setState({
					HonorList:data.mdreList?data.mdreList:[],
					mdrt:data.mdrt,
					star:data.star
				})
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		}, (res) => {
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	//成长历程
	getAgentchangeList(){
		 pub.loading(this,true);
		fetch.getAgentchangeList({}).then((data)=>{
			if(data.result==='RC100'){
				this.setState({
					agentChangeList:data.agentChangeList?data.agentChangeList:[]
				})
			}else{
				message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		}, (res) => {
			pub.loading(this,false);
			pub.reject(res);
		})
	}
    componentWillMount() {
		this.getOne();
		this.myHonor();
		this.allCertificate();
		this.getAgentchangeList();
		
	}
	changeState(){
      this.setState({
		  changeState:!this.state.changeState
	  })
	}
	chooseImage(accepted, rejected){
		this.setState({
			cover_image:accepted[0],
			headPath:""
		})
	}
	seifInformation(event){
	   if(event.target.value.length>=45){
		   message.error('个人感悟字数不能超过45！请重新输入', 3);
		   return;
	   }else{
           this.setState({
		        seifInformation:event.target.value,
	       })
	   }
	}
	onSubmit(){
		this.setState({
		  changeState:!this.state.changeState
	  })
	  let formData = new FormData();
	  if(this.state.headPath===''){
		  //console.log(456777,this.state.cover_image)
		formData.append('file',this.state.cover_image);
	  }else{
		formData.append('file',this.state.headPath);
	  }
	  formData.append('seifInformation',this.state.seifInformation);
	     pub.loading(this,true);
		fetch.analysisUpdate(formData).then((data) => {
			if(data.result==='RC100'){
              message.success('保存成功', 3);
			}else{
              message.error(data.errMsg, 3);
			}
			pub.loading(this,false);
		   // window.location.reload();
			this.getOne();
			this.myHonor();
			this.allCertificate();
			this.getAgentchangeList();
		}, (res) => {
			pub.loading(this,false);
			pub.reject(res);
		})
	}
	render(){
		let data=this.state.userData;
		let user=this.state.user1Data;
		// let Honor2ListMy=this.state.Honor2ListMy;
		return(
			<div>
              <div className="row user-card-box">
					<div className="bg-FFFFFF">
						<Spin spinning={this.state.loading} tip="加载列表中...">
						<div className="left">
							<div className="tx">
									{
										this.state.headPath||this.state.headPath===null?
											<img src={pub.getFile(user.headPath)} alt='test' onError={(e) => pub.headImageError(e)}/>
											: <img src={this.state.cover_image.preview} alt='test' onError={(e) => pub.headImageError(e)}/>
									}
								
								{
									this.state.changeState?null:
									<Dropzone
										multiple={false}
										onDrop={this.chooseImage.bind(this)}
										className = 'choose-image'
										accept="image/jpeg, image/png"
									>
                                       <label style={{display:'inline-block'}}>更改图像</label>
									</Dropzone>
								}
								<input className="file1 file" style={{display:'none'}} type="file"/>
							</div>
							<ul>
								<li><span><i className="icon-calendar"></i></span><label>入职时间</label>{data.enterDate?data.enterDate.substr(0,4)+'-'+data.enterDate.substr(4,2)+'-'+data.enterDate.substr(6,2):''}</li>
								<li><span><i className="icon-map-marker"></i></span><label>所在地</label>{data.address?data.address:''}</li>
								<li><span><i className="icon-user"></i></span><label>职务</label>{user.jobName?user.jobName:''}</li>
								<li><span><i className="icon-building"></i></span><label>分公司</label>{data.manageComName?data.manageComName:''}</li>
								<li><span><i className="icon-flag"></i></span><label>营业部</label>{data.departmentName?data.departmentName:''}</li>
								<li><span><i className="icon-group"></i></span><label>营业组</label>{data.sellComName?data.sellComName:''}</li>
							</ul>
						</div>
						<div className="right">
							<span className="edit">
								{this.state.changeState?
								 <i className="icon-edit" onClick={this.changeState.bind(this)} title="编辑"></i>:
							     <i className="icon-save" title="保存" onClick={this.onSubmit.bind(this)}></i>
								}
							</span>
							<div className="row">
								<h3 className="name">{data.userName?data.userName:''}</h3>
								<p className="phone-mail"><span><i className="icon-phone"></i></span><label>手机号</label>{data.phone?data.phone:''}</p>
								<p className="phone-mail"><span><i className="icon-envelope" style={{position:"relative",top:"1px",left:"-1px"}}></i></span><label>邮箱</label>{data.email?data.email:''}</p>
							</div>
							
							<div className="row">
								<h2 className="title"><i className="icon-lightbulb"></i>个人感悟</h2>
								{
									this.state.changeState?
								<p className="cont grgw">{this.state.seifInformation}</p>
								:<p className="cont grgw"><textarea placeholder="请输入个人感悟" value={this.state.seifInformation} onChange={this.seifInformation.bind(this)}>{this.state.seifInformation}</textarea></p>
								}
							</div>
							
							<div className="row">
								<h2 className="title"><i className="icon-czjl"></i>成长经历</h2>
								<div className="czjl">
									<ul>
										{
											this.state.agentChangeList.map((item,index)=>{
											return(
												<li key={index}><span className="time">{item.changeDate?item.changeDate.substr(0,4)+'-'+item.changeDate.substr(4,2)+'-'+item.changeDate.substr(6,2):''}</span><span className="icon-czjl"></span><span style={{marginRight:'612px'}}>{item.gradeName}</span></li>
												)
									       })
										}
									</ul>
								</div>
							</div>
							<div className="row">
								<h2 className="title"><i className="icon-ryzs"></i>荣誉证书</h2>
								<div className="honor-show">
									<ul className="clearFix">
										{
											this.state.mdrt?
											<li>
												<img src={require('../../style/images/jiangZ-2.png')} alt='test'/>
												<p>{this.state.mdrt}</p>
											</li>:null
										}
										{
											this.state.star?
											<li>
												<img src={require('../../style/images/jiangZ-2.png')} alt='test'/>
												<p>{this.state.star}</p>
											</li>:null
										}
										{this.state.HonorList.map((item,index)=>{
											
											return(
												<li key={index}>
													<img src={require('../../style/images/jiangZ-2.png')} alt='test'/>
													<p>{item.datecode}</p>
												</li>
												)
										})}
									</ul>
								</div>
							</div>
							
							<div className="row">
								<h2 className="title"><i className="icon-fxry"></i>{(JSON.parse(localStorage.getItem('user')).channelId)==='4'?'星行荣誉':'蜂行荣誉'}</h2>
								<div className="honor-show-1">
									<ul className="clearFix" style={{whiteSpace:"nowrap",overflowX:"auto"}}>
			                         {this.state.Honor2List.map((item,index)=>{
										return(
												<li key={index}  className={item.isHave===1?'':'demo'}>
													<img src={pub.getFile(item.honorBadge)} alt='test'/>
													<p>{item.honorName}</p>
													{/*<p className="time">{pub.formatTimestamp(item.createTime)}</p>*/}
												</li>
											)
		                          	})}
		                              </ul>
								</div>
							</div>
						</div>
						</Spin>
					</div>
				</div>
			 </div>
			)
	}
}
export default Card;